<template>
  <div class="related">
    <div class="tab-container tab-relate-info">
      <div class="tab-title-container related-tab-title">
        <div class="tab-title active">预告片</div>
        <!-- <el-divider></el-divider> -->
      </div>
    </div>
    <div class="tab-content-container">
      <div class="tab-preview tab-content active">
        <div class="module">
          <div class="mod-title">
            <h2>预告片</h2>
          </div>
          <div class="mod-content">
            <div class="preview-container">
              <ul id="video">
                <li
                  v-if="Videos.length > 0"
                  v-for="(video,index) in Videos"
                  :key="video.id"
                  class="top-list"
                >
                  <div class="top-info-thumb">
                    <div class="toVideo" @click="ToTrailer(video.id)">
                      <img :src="video.iSrc" alt="" />
                      <i class="ranking top-info-icon orange-bg">{{index+1}}</i>
                      <i class="play-icon"></i>
                    </div>
                  </div>
                  <div class="top5-video-info">
                    <p class="toVideo"  @click="ToTrailer(video.id)">{{ video.des }}</p>
                    <div class="video-view">
                      <span class="video-play-count">
                        {{numberFormat(video.watchNum).value}}{{numberFormat(video.watchNum).unit}}
                      </span>
                    </div>
                  </div>
                </li>
                <li class="noVideo" v-if="Videos.length === 0">暂无预告片，敬请期待</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { numberFormat } from '@/utils'
export default {
  data () {
    return {}
  },
  mounted () {
    this.$store.dispatch('video/getVideoByMId', this.mId)
  },
  props: ['mId'],
  computed: {
    ...mapState('video', ['Videos']),
    videoCount () {
      return numberFormat(this.Videos.length)
    }
  },
  methods: {
    ToTrailer (id) {
      this.$router.push({ name: 'trailer', query: { videoId: id, mId: this.mId } })
    },
    numberFormat (value) {
      const param = {}
      const k = 10000
      const sizes = ['', '万', '亿', '万亿']
      let i
      if (value < k) {
        param.value = value
        param.unit = ''
      } else {
        i = Math.floor(Math.log(value) / Math.log(k))

        param.value = ((value / Math.pow(k, i))).toFixed(2)
        param.unit = sizes[i]
      }
      return param
    }
  }
}
</script>

<style scoped>
.related {
  margin-left: 840px;
  width: 400px;
}
.tab-content-container {
  margin-top: 39px;
}
.tab-container .tab-title-container {
  border-bottom: 2px solid #eee;
}
.tab-container .related-tab-title {
  height: 30px;
  /* margin: 45px 0; */
}
.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}
.tab-container .tab-title-container .tab-title.active {
  color: #ef4238;
  border-bottom-color: #ef4238;
}

.module {
  position: relative;
  margin-bottom: 60px;
}
.module .mod-title h2 {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-size: 18px;
  color: #333;
  line-height: 18px;
}
.module .mod-title h2:before {
  float: left;
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  margin-right: 6px;
  background-color: #ef4238;
}
.mod-content {
  margin-top: 20px;
  color: #333;
}
.top-list {
  margin-bottom: 20px;
}
.top-info-thumb {
  position: relative;
  margin-right: 16px;
  display: inline-block;
}
.preview-container a {
  color: #333;
}
.top-info-thumb .ranking {
  padding-left: 3px;
  width: 15px;
  height: 18px;
  font-size: 16px;
  color: #999;
  display: inline-block;
  line-height: 20px;
}

.top-info-thumb .top-info-icon {
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
}
.orange-bg {
  background-color: #f90;
}
.top-info-thumb .play-icon {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 24px;
  height: 24px;
  background-size: 24px;
}
.top5-video-info {
  float: right;
  vertical-align: top;
  width: 224px;
}
.top5-video-info p {
  margin: 14px 0 10px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-info-thumb img {
    width: 120px;
    height: 68px;
    vertical-align: bottom;
}

img {
    border-style: none;
}
.preview-container .toVideo {
  cursor: pointer;
  color: #333;
}
.toVideo:hover {
  color: #FF0000;
}
.video-play-count {
    color: #999;
    font-size: 12px;
}
.video-play-count:before {
    content: "";
    display: inline-block;
    margin-right: 5px;
    width: 0;
    height: 0;
    border-width: 5px 0 5px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #d8d8d8;
}
.noVideo {
  color: #999;
  list-style: none;
}
</style>
